<template>
  <span>
    <!-- 渲染第一、二层 -->
    <el-row v-for="(right, index) in totalRights"
            :class="{'border-top':index}" v-if="rights.indexOf(right.id)!==-1">
      <!-- 左列 -->
      <el-col :span="5">
        <el-tag v-if="right.level === 1" closable
                @close="tagClose(right.id)">{{ right.authName }}</el-tag>
        <el-tag type="success" v-else-if="right.level === 2"
                @close="tagClose(right.id)" closable>{{ right.authName }}</el-tag>
        <i class="el-icon-caret-right"></i>
      </el-col>
      <!-- 右列 -->
      <el-col v-if="right.level !== 2" :span="19">
        <!-- 递归调用自身 -->
        <tag-tree :total-rights="right.children"
                  :rights="rights" :id="id" @tag_close="childTagClose"></tag-tree>
      </el-col>
      <!-- 渲染第三层 因为与1、2层有部分不同 所以单独渲染 -->
      <el-col v-else :span="19">
        <el-tag v-for="right1 in right.children" type="warning"
                @close="tagClose(right1.id)" closable
                v-if="rights.indexOf(right1.id)!==-1">
          {{ right1.authName }}
        </el-tag>
      </el-col>
    </el-row>
  </span>
</template>

<script>
export default {
  name: 'TagTree',
  // id 为角色id
  props: ['totalRights', 'rights', 'id'],
  methods: {
    // 权限树中节点点击关闭按钮时调用
    tagClose(rid) {
      this.$emit('tag_close', this.id, rid)
    },
    // 处理子节点的tagClose响应
    childTagClose(id, rid) {
      this.$emit('tag_close', this.id, rid)
    }
  }
}
</script>

<style scoped>
.el-row {
  display: flex;
  align-items: center;
}

.el-tag {
  margin: 10px;
}

.border-top {
  border-top: 1px #eee solid;
}

.border-bottom {
  border-bottom: 1px #eee solid;
}
</style>